<template>
  <div class='out_warp'
       style="">
    <h3 class="head_title">登录</h3>
    <div class="mid_warp">
      <h3 v-show="logo_show"><img src="../../assest/images/logo.png"
             alt=""></h3>
      <div class="tab_two"
           @click="handleChange">
        <div class="tab_item"
             :class="tabindex?'active_css':''">手机号登录</div>
        <div class="tab_item"
             :class="!tabindex?'active_css':''">用户注册</div>
      </div>
      <div class="form_login"
           v-if="tabindex">
        <form action="#"
              method="post"
              :v-model="loginFrom">
          <div class="input_item">
            <i class="iconfont icon-ai-phone"></i>
            <!-- <div style="height:24px;width:2px;background-color:#eee"></div> -->
            <input type="number"
                   name="phone"
                   value="phone"
                   v-model="loginFrom.phone"
                   placeholder="请输入手机号">
          </div>
          <div class="input_item">
            <i class="iconfont icon-mima"></i>
            <input type="password"
                   name="password"
                   value="password"
                   v-model="loginFrom.password"
                   placeholder="请输入密码">
          </div>
          <h3 class="forget_mima">
            <router-link to="">忘记密码？</router-link>
          </h3>
          <button class="btn"
                  @click="handleLogin">登录</button>
        </form>
        <div class="bot_warp">
          <div v-for="(item, index) in imglist"
               :key="index"
               @click="handleLoginOther(index)">
            <i class="iconfont"
               :class="item.img"
               style="font-size:50px"
               :style="{color:item.color}"></i>
            <strong :class="index===selectindex?'select_color':''">{{item.text}}</strong>
          </div>
        </div>
      </div>
      <div class="from_register"
           v-if="!tabindex">
        <form action="#"
              method="post"
              :v-model="regisFrom">
          <div class="input_item">
            <i class="iconfont icon-yonghu"></i>
            <input type="number"
                   name="username"
                   value="username"
                   v-model="regisFrom.username"
                   placeholder="请输入用户名">
          </div>
          <div class="input_item">
            <i class="iconfont icon-xingbie"></i>
            <input type="text"
                   name="sex"
                   value="sex"
                   v-model="regisFrom.sex"
                   placeholder="性别">
          </div>
          <div class="input_item">
            <i class="iconfont icon-ai-phone"></i>
            <input type="number"
                   name="phone"
                   value="phone"
                   v-model="regisFrom.phone"
                   placeholder="请输入手机号">
          </div>
          <div class="input_item">
            <i class="iconfont icon-yanzhengma"></i>
            <input type="number"
                   name="code"
                   value="code"
                   v-model="regisFrom.phone"
                   style="width:100px"
                   placeholder="验证码">
            <button class="btn_send"
                    type="button"
                    @click="sendCode">{{phonecode}}</button>
          </div>
          <div class="input_item">
            <i class="iconfont icon-mima"></i>
            <input type="password"
                   name="password"
                   value="password"
                   v-model="regisFrom.password"
                   placeholder="请输入密码">
          </div>
          <button class="btn"
                  @click="handleRegis">注册</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      tabindex: true,
      fcousinput: false,
      selectindex: -1,
      logo_show: true,
      phonecode: '获取验证码',
      time: '',
      imglist: [{
        id: 1,
        img: 'icon-weixin',
        text: '微信',
        color: '#50B674'
      },
      {
        id: 1,
        img: 'icon-qq1',
        text: 'QQ',
        color: '#5EAADE'
      },
      {
        id: 1,
        img: 'icon-weibo',
        text: '微博',
        color: '#EB5D5C'
      }],
      loginFrom: {
        phone: '',
        password: ''
      },
      regisFrom: {
        phone: '',
        sex: '',
        username: '',
        code: '',
        password: ''
      }
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    handleChange: function () {
      this.tabindex = !this.tabindex
      if (!this.tabindex) {
        this.logo_show = false
      } else {
        this.logo_show = true
      }
    },
    handleLoginOther (index) {
      console.log(index)
      this.selectindex = index
    },
    // 获取验证码
    sendCode: function () {
      var times = 60
      this.time = setInterval(() => {
        times--
        this.phonecode = times + 's'
        if (times === 0) {
          clearInterval(this.time)
          this.phonecode = '获取验证码'
        } else {

        }
      }, 1000)
    },
    // 登录函数handleLogin
    handleLogin: function () { },
    // 注册函数handleRegis
    handleRegis: function () { }
  }
}
</script>

<style scoped lang="less">
@import "login.css";
</style>
